<!-- #layout name=blank --sideType='market'-->
<style>
    .bidder-list {
        margin: 0;
        padding: 0;
    }
    
    .bidder {
        list-style: none;
        padding: 15px 0;
        border-bottom: 1px solid #dedede;
    }
    
    .bidder.selected {
        background: #dff0d8;
    }
    
    .bidder.failed {
        opacity: 0.2;
    }
    
    .bidder:last-child {
        border-bottom: 0;
    }
    
    .avatar {
        width: 48px;
        height: 48px;
        background: #eee;
        border-radius: 50%;
        line-height: 48px;
        color: #aaa;
        text-align: center;
        font-weight: bold;
        font-size: 14px;
        margin-right: 10px;
    }
    
    .avatar.blue {
        background: #009ad7;
        color: white;
    }
    
    .bidder .nickname {
        font-size: 16px;
        margin-bottom: 5px;
        font-weight: bold;
    }
    
    .bidder .nickname .btn,
    .bidder .nickname .badge {
        vertical-align: text-bottom;
        margin-left: 5px;
    }
    
    .bidder .info {
        font-size: 14px;
        line-height: 20px;
        margin: 20px 0;
    }
    
    .bidder .info .item {
        margin-right: 10px;
    }
    
    .bidder .info .item .value {
        font-weight: bold;
    }
    
    .bidder .description {
        font-size: 15px;
        line-height: 1.5;
        margin-bottom: 10px;
        word-break: break-all;
    }
    
    .bidder .attachments .attachment {
        display: inline-block;
        margin-right: 10px;
        margin-bottom: 4px;
        padding: 4px 12px;
        background: #eee;
        border-radius: 30px;
    }
    .color-gray {
        color: #999;
    }

    .media-heading {
        margin: 6px 0px;
        word-break: break-all;
    }
</style>
<div class="page-header">
    <h1 class="title">Demand</h1>
</div>

<div data-bind="component: { name: 'kb-breadcrumb', params:[{
        name: 'MARKET'
    },{
        name: Kooboo.text.common.Demands,
        url: Kooboo.Route.Demand.ListPage
    },{
        name: Kooboo.text.common.detail
    }]}"></div>

<div class="row">
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title" data-bind="text: title"></h3>
                <div class="panel-actions">
                    <!-- ko if: isOwner() && !isTaken() && !isClose() -->
                    <button class="btn btn-xs btn-info" data-bind="click: onUpdateDemand"><i class="fa fa-pencil"></i></button>
                    <!-- /ko -->
                </div>
            </div>
            <div class="panel-body">
                <div data-bind="html: description" class="margin-bottom-20"></div>
                <div class="form-group" data-bind="visible: attachments().length">
                    <label>Attachments</label>
                    <p class="form-control-static" data-bind="foreach: attachments">
                        <a data-bind="attr: { href: $data.downloadUrl }" target="_blank">
                            <i class="fa fa-paperclip"></i>
                            <!-- ko text: $data.fileName -->
                            <!-- /ko -->
                        </a>
                    </p>
                </div>
                <hr>
                <div class="row">
                    <div class="col-md-2 col-sm-4 col-xs-6">
                        <div class="form-group">
                            <label>Status</label>
                            <p class="form-control-static" data-bind="text: displayStatus"></p>
                        </div>
                    </div>
                    <div class="col-md-1 col-sm-4 col-xs-6">
                        <div class="form-group">
                            <label>Budget</label>
                            <p class="form-control-static" data-bind="text: budget, attr: { title: currency }"></p>
                        </div>
                    </div>
                    <div class="col-md-2 col-sm-4 col-xs-6">
                        <div class="form-group">
                            <label>Duration</label>
                            <p class="form-control-static" data-bind="text: duration"></p>
                        </div>
                    </div>
                    <div class="col-md-2 col-sm-4 col-xs-6">
                        <div class="form-group">
                            <label>Demand owner</label>
                            <p class="form-control-static" data-bind="text: userName"></p>
                        </div>
                    </div>
                    <div class="col-md-5 col-sm-8 col-xs-6">
                        <div class="form-group">
                            <label>Required skills</label>
                            <p class="form-control-static">
                                <!-- ko foreach: skills -->
                                <label class="label label-sm label-info" data-bind="text: $data"></label>
                                <!-- /ko -->
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <ul class="nav nav-tabs margin-bottom-15">
            <li class="active">
                <a href="#tab_1_1" data-toggle="tab">Proposals</a>
            </li>
            <!-- ko if: isTaken() && (isTakenByCurrentUser() || isOwner()) -->
            <li>
                <a href="#tab_1_3" data-toggle="tab">Delivery</a>
            </li>
            <!-- /ko -->
            <li>
                <a href="#tab_1_2" data-toggle="tab">Comments</a>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane fade active in" id="tab_1_1">

                <!-- ko if: !isOwner() -->

                <!-- ko if: !hasCurrentUserMadeABid() && !isTaken() && !isClose() -->
                <div class="alert alert-info">
                    <span>You have not bid yet, click</span>&nbsp;<a href="javascript:;" class="alert-link" data-bind="click: onShowProposalModal">here</a>&nbsp;<span>to make a bid.</span>
                </div>
                <!-- /ko -->

                <!-- /ko -->

                <!-- ko if: isClose -->
                <div class="alert alert-warning">
                    <strong>Notice</strong>&nbsp;<span>This demand is</span>&nbsp;<span data-bind="text: displayStatus"></span>
                </div>
                <!-- /ko -->

                <!-- ko if: isDemandInvalid -->
                <div class="alert alert-danger">
                    <strong>Notice</strong>&nbsp;<span>Demand expired</span>
                </div>
                <!-- /ko -->

                <ul class="bidder-list" data-bind="visible: proposals().length, foreach: proposals">
                    <li class="bidder clearfix" data-bind="css: { 'selected': $data.isTaken && $parent.isTaken, 'failed': !$data.isTaken && $parent.isTaken}">
                        <div class="avatar pull-left" data-bind="text: $data.firstLetter"></div>
                        <div class="pull-left col-md-8">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="nickname">
                                        <span data-bind="text: $data.userName"></span>
                                        <!-- ko if: $parent.isTaken -->

                                        <!-- ko if: $parent.takenProposalId() == $data.id -->
                                        <span class="badge badge-success"><i class="fa fa-trophy"></i></span>
                                        <!-- /ko -->

                                        <!-- ko ifnot: $parent.takenProposalId() == $data.id -->
                                        <span class="badge badge-danger"><i class="fa fa-close"></i></span>
                                        <!-- /ko -->

                                        <!-- /ko -->
                                    </div>
                                    <div class="description" data-bind="html: $data.description"></div>
                                    <div class="attachments" data-bind="visible: $data.attachments.length">
                                        <!-- ko foreach: { data: $data.attachments, as: 'attach' } -->
                                        <a class="attachment" data-bind="attr: { href: attach.url }" target="_blank">
                                            <i class="fa fa-paperclip"></i>
                                            <!-- ko text: attach.fileName -->
                                            <!-- /ko -->
                                        </a>
                                        <!-- /ko -->
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="info">
                                        <div class="item">
                                            <span>Budget</span>:
                                            <span class="value" data-bind="text: $data.budget"></span>
                                        </div>
                                        <div class="item">
                                            <span>Duration</span>:
                                            <span class="value" data-bind="text: $data.duration"></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="info">

                                        <!-- ko if: $parent.isOwner() && $parent.isOpening() -->
                                        <button class="btn btn-sm btn-info" data-bind="click: $parent.onAcceptProposal.bind(this, $data), tooltip: Kooboo.text.tooltip.demand.acceptProposal">Accept</button>
                                        <!-- /ko -->

                                        <!-- ko if: $data.isMyProposal -->

                                        <!-- ko if: $parent.isOpening -->
                                        <button class="btn btn-xs btn-info" data-bind="click: $parent.onShowProposalModal"><i class="fa fa-pencil"></i></button>
                                        <!-- /ko -->

                                        <!-- ko if: $parent.isClose -->
                                        <button class="btn btn-xs btn-default" data-bind="click: $parent.onShowObjectionModal"><i class="fa fa-user-md"></i></button>
                                        <!-- /ko -->

                                        <!-- /ko -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>

            <div class="tab-pane fade" id="tab_1_2">
                <!-- ko ifnot: isOpening -->
                <div class="well text-center">
                    <p><i class="fa fa-ban"></i> <span>Demand closed, no comment allowed</span></p>
                </div>
                <!-- /ko -->
                <div data-bind="visible: publicCommentList().length">
                    <ul class="media-list" data-bind="foreach: { data: publicCommentList, as: 'public', afterRender: commentRendered }">
                        <li class="media">
                            <a href="javascript:;" class="pull-left">
                                <div class="avatar pull-left" data-bind="text: public.firstLetter"></div>
                            </a>
                            <div class="media-body">
                                <h5 class="media-heading" data-bind="html: public.content"></h5>
                                <p class="clearfix">
                                    <span class="pull-left color-gray">
                                        <span data-bind="text: public.userName"></span>
                                        <span>commented at</span>
                                        <span data-bind="text: public.date"></span>
                                    </span>
                                    <span class="pull-right">
                                                <a href="javascript:;" data-bind="click: $parent.onToggleSubComment.bind(public)">
                                                    <i class="fa fa-comment-o"></i>
                                                    <!-- ko text: public.commentCount -->
                                                    <!-- /ko -->
                                                </a>
                                            </span>
                                </p>
                                <div data-bind="visible: public.showSubComment">
                                    <div data-bind="foreach:{ data: public.subCommentList, as: 'sub', afterRender: $parent.commentRendered }">
                                        <div class="media margin-top-15">
                                            <a class="pull-left" href="#">
                                                <img class="avatar media-object" data-bind="attr: { 'data-src': 'holder.js/48x48?text=' + sub.firstLetter }" alt="48x48" style="width: 48px; height: 48px;">
                                            </a>
                                            <div class="media-body">
                                                <h5 class="media-heading" data-bind="html: sub.content"></h5>
                                                <p>
                                                    <span class="pull-left color-gray">
                                                        <span data-bind="text: sub.userName"></span>
                                                        <span>replied at</span>
                                                        <span data-bind="text: sub.date"></span>
                                                    </span>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <hr>
                                    <!-- ko if: $root.isOpening -->
                                    <reply-panel params="type: 'demand', typeId: $root.id, parentId: public.id"></reply-panel>
                                    <!-- /ko -->
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <hr>
                <!-- ko if: isOpening -->
                <reply-panel params="type: 'demand', typeId: id"></reply-panel>
                <!-- /ko -->
            </div>
            <div class="tab-pane fade" id="tab_1_3">
                <!-- ko if: isOwner() && isTaken() && !isClose() -->
                <a href="javascript:;" class="btn btn-sm btn-info" data-bind="click: onFinishTheDemand.bind(this, true)">Accept</a>
                <a href="javascript:;" class="btn btn-sm btn-default" data-bind="click: onFinishTheDemand.bind(this, false)">Reject</a>
                <hr>
                <!-- /ko -->
                <reply-panel params="type: 'delivery', typeId: takenProposalId, disabled: isClose"></reply-panel>
                <div data-bind="visible: messages().length">
                    <hr>
                    <ul class="media-list" data-bind="foreach: { data: messages, as: 'msg' }">
                        <li class="media">
                            <a href="javascript:;" class="pull-left">
                                <div class="avatar pull-left" data-bind="text: $data.firstLetter, css: { 'blue': !isCurrentUser() }"></div>
                            </a>
                            <div class="media-body">
                                <!-- ko if: msg.content -->
                                <h5 class="media-heading" data-bind="html: msg.content"></h5>
                                <!-- /ko -->
                                <!-- ko if: msg.attachment() -->
                                <h5 class="media-heading">
                                    <a data-bind="attr: { href: msg.attachment().url }" target="_blank">
                                        <i class="fa fa-paperclip"></i>
                                        <!-- ko text: msg.attachment().fileName -->
                                        <!-- /ko -->
                                    </a>
                                </h5>
                                <!-- /ko -->
                                <p class="clearfix">
                                    <span class="pull-left">
                                                    <span data-bind="text: msg.userName"></span>
                                    <span>send at</span>
                                    <span data-bind="text: msg.date"></span>
                                    </span>
                                </p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<objection-modal params="isShow: showObjectionModal, demandId: id"></objection-modal>
<demand-modal params="isShow: showDemandModal, data: currentDemand"></demand-modal>
<proposal-modal params="isShow: showProposalModal, demandId: id, currencyCode: currency, currencySymbol: currencySymbol, data: showingProposal, mode: proposalViewingMode"></proposal-modal>
<div data-bind="component: {name: 'cashier-modal'}"></div>

<script>
    (function() {
        Kooboo.loadJS([
            "/_Admin/Scripts/lib/holder.js",
            "/_Admin/Scripts/components/kbBreadcrumb.js",
            "/_Admin/Scripts/lib/jquery.textarea_autosize.min.js",
            "/_Admin/View/Market/Scripts/components/ReplyPanel.js",
            "/_Admin/View/Market/Scripts/components/ProposalModal.js",
            "/_Admin/View/Market/Scripts/components/DemandModal.js",
            "/_Admin/View/Market/Scripts/components/ObjectionModal.js",
            "/_Admin/View/Market/Scripts/components/CashierModal.js",
        ])
    })()
</script>
<script src="/_Admin/View/Market/Scripts/Kooboo.Market.js"></script>
<script src="/_Admin/View/Market/Demand/Detail.js"></script>